<template>
  <div class="component-mobile__card-item">
    <div class="tags">
      <van-tag
        type="primary"
        v-if="course_list_ids.indexOf(detail.id) != -1 && !isDeleted(detail.id)"
        >已拥有</van-tag
      >
      <van-tag color="rgb(183 181 181)" v-if="isDeleted(detail.id)"
        >已过期</van-tag
      >
    </div>
    <div class="item-content">
      <div class="it-left">
        <div class="item-title">{{ detail.courseName }}</div>
        <div class="item-subtitle">{{ detail.majorName }}</div>
        <div class="item-tx">课程练习</div>
      </div>
      <div
        class="it-right"
        v-if="course_list_ids.indexOf(detail.id) != -1 && !isDeleted(detail.id)"
      >
        <van-button
          type="primary"
          size="small"
          @click="toPath('/m/testing?id=' + detail.id)"
          v-if="detail.isQuestionBank === 1"
          >开始练习</van-button
        >
        <van-button
          type="primary"
          size="small"
          @click="toPath('/m/testing?id=' + detail.id)"
          v-if="detail.isQuestionBank === 0"
          >暂无试题</van-button
        >
      </div>
      <div
        class="it-right"
        v-if="
          (!is_hidden_content &&
            !is_hidden_for_ios &&
            course_list_ids.indexOf(detail.id) == -1) ||
            isDeleted(detail.id)
        "
      >
        <van-button
          type="primary"
          size="small"
          @click="toPath('/m/course-detail?id=' + detail.id)"
          >购买课程</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  props: ["detail", "type", "is_exam", "course_record_list"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      major_list(state) {
        return state.major_list;
      },
      is_hidden_for_ios(state) {
        return state.is_hidden_for_ios;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      }
    }),
    course_list_ids() {
      console.log("题库页面已购买课程", this.course_record_list);
      return this.course_record_list.map(i => i.courseId);
    }
  },
  watch: {},
  methods: {
    ...mapActions(["initMajorList"]),
    isDeleted(id) {
      let deleted = this.course_record_list.filter(
        item => item.courseId === id
      );

      if (deleted.length > 0) {
        return deleted[0].deleted === 1;
      }
      // console.log("deleted",deleted)
      return false;
    },
    toPath(path) {
      this.$router.push(path);
    },
    getMajorName(item) {
      let res = this.major_list.filter(i => i.id == item.majorId);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return "未知";
      }
    }
  },
  created() {
    this.initMajorList();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component-mobile__card-item {
  margin: auto;
  padding: 0.2rem 0.2rem;
  background-color: #fff;
  width: 6.5rem;
  border: 0.02px solid rgba(235, 235, 235, 1);
  border-radius: 0.1rem;
  position: relative;
  .tags {
    position: absolute;
    right: 0;
    top: 0;
  }
  .item-title {
    color: rgba(51, 51, 51, 1);
    font-size: 0.28rem;
    line-height: 1.4;
  }
  .item-content {
    display: flex;
    .it-left {
      flex: 1;
      .item-subtitle {
        margin-top: 0.15rem;
        color: #333;
        font-size: 0.24rem;
      }
      .item-tx {
        margin-top: 0.15rem;
        color: #999;
        font-size: 0.18rem;
      }
    }
    .it-right {
      display: flex;
      align-items: center;
      width: 1.5rem;
      .van-button {
        padding: 0 0.2rem;
        border-radius: 0.5rem;
        height: 0.5rem;
        line-height: 0rem;
      }
    }
  }
}
.component-mobile__card-item + .component-mobile__card-item {
  margin-top: 0.2rem;
}
</style>
